<template>
	<view class="contentBody">

		<!-- <view class="gongao_icon_box">
			<u-notice-bar direction="column" @click="noticeLink" :text="noticeList" type="none"></u-notice-bar>
		</view> -->
		<view class="bannerBox">
			<u-swiper keyName="image" showTitle :autoplay="false" circular :list="bannerlist"></u-swiper>
		</view>
		<!-- <view class="gongao_icon_box">
			<u-notice-bar @click="noticeLink" :text="noticeList" type="none"></u-notice-bar>
		</view> -->

		<status-list :statusList="statusList" :noticeList="noticeList"></status-list>

		<category-list :categories="categories"></category-list>


		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
		<view class="class_box">
			<view class="title">今日指导价</view>
		</view>
		<u-cell-group>
		
			<!-- 使用 v-for 动态渲染价格信息 -->
			<u-cell v-for="(item, index) in priceList" :key="index" :title="item.title" :label="item.description"
				:value="item.price_unit" :title-style="{color:'#000000',fontSize:'32rpx'}"
				:value-style="{color:'#009920',fontSize:'32rpx'}">
			</u-cell>
		</u-cell-group>

	</view>
</template>

<script>
	import categoryList from '@/components/category.vue';
	import statusList from '@/components/statusList.vue';

	export default {
		components: {
			categoryList,
			statusList
		},
		data() {
			return {
				// noticeList: [
				// 	'平明送客楚山孤',
				// 	'平明送客楚山孤'
				// ]
				priceList: [],
				statusList: [],
				categories: [],
				noticeList: '',
				bannerlist: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				]
			}
		},
		onLoad() {
			this.getNotices()
			this.getBanners()
			this.getCategories()
			this.getStatus();
			this.getCategoryPrice()
		},
		methods: {
			async getCategoryPrice() {
				let that = this
				let response = await this.$api.getCategoryPrice()
				this.priceList = response.data
				console.log(this.statusList)
			},
			async getStatus() {
				let that = this
				let response = await this.$api.getStatus()
				this.statusList = response.data
				console.log(this.statusList)
			},
			async getCategories() {
				let that = this
				let requestData = {}
				let response = await this.$api.getCategories()
				this.categories = response.data
				console.log(this.categories)
			},
			async getBanners() {
				let that = this
				let requestData = {}
				let response = await this.$api.getBanners()
				this.bannerlist = response.data
				console.log(this.bannerlist)
			},
			async getNotices() {
				let response = await this.$api.getNotices()
				this.noticeList = response.data
				console.log(this.noticeList)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gongao_icon_box {
		width: 694rpx;
		height: 200rpx;
		background: #ffffff;
		border-radius: 20rpx;
		z-index: 99;
		margin-top: 0rpx;
		position: absolute;
		left: 28rpx;
		box-shadow: 0 0 5px #dedede;
	}

	.bannerBox {
		width: 694rpx;
		padding-top: 30rpx;
		padding-bottom: 26rpx;
		margin: 0 auto;
	}

	.class_boxs {
		width: 100%;
		justify-content: space-between;
		display: flex;
		flex-flow: row wrap;
		padding-top: 24rpx;

		.cols {
			width: 145rpx;
			height: 200rpx;
			padding: 24rpx 160rpx 24rpx 30rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			position: relative;


			.subName {
				font-size: 30rpx;
				font-weight: bolder;
				color: #ffffff;
				padding-bottom: 8rpx;
			}

			.subTitle {
				font-size: 24rpx;
				// color:#fff;
				// color: #ffffff;

				text {
					padding-right: 12rpx;
				}
			}

			.order_btn {
				width: 103rpx;
				height: 31rpx;
				background: url(~@/static/coolc/order_btn.png) no-repeat;
				background-size: 100% auto;
				position: absolute;
				left: 30rpx;
				bottom: 24rpx;
			}

			.r_icon {
				width: 160rpx;
				height: 200rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background-position: center;
				background-repeat: no-repeat;
				background-size: auto 140rpx;
			}
		}

		.color_1_icon {
			background: linear-gradient(to right, #76dc8f, #16b281);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_1.png);
				background-size: 110rpx 130rpx;
			}
		}

		.color_2_icon {
			background: linear-gradient(to right, #92dbff, #2eb5ff);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_2.png);
				background-size: 120rpx 130rpx;
			}
		}

		.color_3_icon {
			background: linear-gradient(to right, #b5cef1, #8eaad7);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_3.png);
			}
		}

		.color_4_icon {
			background: linear-gradient(to right, #ffb43f, #ff8a00);

			.r_icon {
				background-image: url(~@/static/coolc/class_icon/class_4.png);
			}
		}
	}
</style>



<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>